<script setup lang="ts">
import { useDark, useECharts } from "@pureadmin/utils";
import { color } from "echarts";
import { type PropType, ref, computed, watch, nextTick } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => []
  },
  color: {
    type: String,
    default: "#41b6ff"
  }
});

// console.log("双主状态，q",props.data);
const { isDark } = useDark();

const theme = computed(() => (isDark.value ? "dark" : "light"));

const chartRef = ref();
const { setOptions } = useECharts(chartRef, {
  theme
});


const getSeries = () => {
  let res = []
  
  props.data?.data?.forEach(item => {
    // console.log("props.data?.data",item);
    res.push({
      data: item.value,
      name: item.name,
      color: item.color,
      barWidth: '15%',
      itemStyle: {
        borderRadius: [5, 5, 0, 0],
      },
      type: "bar",
      symbol: "none",
      smooth: true,
    })
  });
  // console.log("双主状态，res",res);

  return res
}
const getxAxis = () => {
  let res = []
  props.data?.xAxis?.forEach(item => {
    res.push(item)
  })
  return res
}
watch(
  () => props.data,
  async () => {
    await nextTick(); // 确保DOM更新完成后再执行
    setOptions({
      container: ".doublebar-card",
      // color: item.color,
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "none"
        }
      },
      grid: {
        left: '3%',

        right: 0,
        bottom: '3%',
        containLabel: true
      },
      legend: {
        // data: ['正常', '异常','未巡检'],
        itemWidth: 8,

        itemHeight: 8,
        textStyle: {
          // color: "",
          // fontSize: "0.875rem",
          fontSize: "0.875rem",
          fontWeight: 400,
          fontFamily: 'PingFang SC',
        },
        top: 0,
        left: 0,
        icon: "circle"
      },
      xAxis: [
        {
          type: "category",
          data: getxAxis(),
          axisLabel: {
            fontSize: "0.875rem"
          },
          axisPointer: {
            type: "shadow"
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisLabel: {
            fontSize: "0.875rem"
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      series: getSeries()
    });
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 260px" />
</template>
